<template>
  <div class="">
    <my-list
      @click="gotoDetail(item, index)"
      v-for="(item, index) in list"
      :key="index"
      :item="item"
    ></my-list>
  </div>
</template>

<script>
import { ref, reactive, toRefs, computed } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import axios from "axios";
import myList from "../components/myList.vue";
export default {
  setup(props, ctx) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const data = reactive({});
    axios.get("data.json").then((res) => {
      store.commit("setList", res.data);
    });
    //请求到数据后 把数据存到vuex
    const list = computed(() => {
      return store.state.list;
    });
    //计算属性 拿到vuex里的list

    const gotoDetail = (item, index) => {
      router.push({
        path: "/about",
        query: {
          title: item.title,
          index: index,
        },
      });
    };
    //跳转详情页 传递的参数 有title和下标
    return { ...toRefs(data), gotoDetail, list };
  },
  components: {
    myList,
  },
};
</script>

<style lang="scss"></style>
